
<ion-content id="home">

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="下拉更新"
      refreshingSpinner="circles"
      refreshingText="更新中...">
    </ion-refresher-content>
  </ion-refresher>

  <!--搜索框-->
  <div class="header-search">
    <div #headerSearch class="header-search-bgColor"></div>
    <div class="header-swiper-input">
      <div class="searchbar-search-icon">
        <ion-icon name="search"></ion-icon>
      </div>
      <input placeholder="搜索..." (click)="goSearch()"/>
      <a class="headerBar-login" (click)="goSearch()">
        <span>搜索</span>
      </a>
    </div>
  </div>

  <div #lyScroll class="scroll-content">
    <!--头部滚动 -->
    <ion-slides pager class="swiper-container" loop="true" autoplay="3000">
      <ion-slide class="swiper-wrapper" *ngFor="let item of headerSlideData">
        <img class="swiper-img" alt="{{item.alt}}" src="{{item.src}}">
      </ion-slide>
    </ion-slides>

    <!-- 功能导航 -->
    <nav id="nav">
    <span *ngFor="let list of navData;" (click)="openNavPage(list)">
      <img src="{{list.src}}" alt="{{list.alt}}">
      <h2>{{list.alt}}</h2>
    </span>
    </nav>

    <!-- 精品推荐 -->
    <div class="floor">
      <div class="floor-title">精品推荐</div>
    </div>
    <div class="floor-detail-slide">
      <!--外层的ion-scroll 100%   里面元素的宽度要大于100%-->
      <ion-scroll scrollX="true">
        <ul class="clearfix" [ngStyle]="{'width':recListWidth}">
          <li *ngFor="let item of recommendList">

            <img src="{{item.pic}}"/>
            <div class="floor-detail-text">{{item.title}}</div>
            <p><span class="price">¥{{item.price}}</span></p>
          </li>
        </ul>
      </ion-scroll>
    </div>

    <!-- 分类楼层 -->
    <div class="floor">
      <div class="floor-title">电脑</div>
      <div class="floor-more">更多 >></div>
    </div>
    <div class="floor-product">
      <ion-row>
        <ion-col col-6>
          <img src="assets/img/homeImg/home-slide-06.jpg"/>
          <div class="floor-product-detail">暗影精灵III代 15.6英寸游戏笔记本电脑</div>
          <p>
            <span class="floor-product-price">¥12000</span>
            <span class="floor-product-price-old">¥11800</span>
          </p>
        </ion-col>

        <ion-col col-6>
          <img src="assets/img/homeImg/home-slide-07.jpg"/>
          <div class="floor-product-text">联想(Lenovo)拯救者R720 15.6英寸游戏笔记本电脑</div>
          <p>
            <span class="floor-product-price">¥12000</span>
            <span class="floor-product-price-old">¥11800</span>
          </p>
        </ion-col>
      </ion-row>
    </div>


    <div class="floor">
      <div class="floor-title">手机</div>
      <div class="floor-more">更多 >></div>
    </div>
    <div class="floor-product">
      <ion-row>
        <ion-col col-6>
          <img src="assets/img/homeImg/home-slide-08.jpg"/>
          <div class="floor-product-detail">小米 红米5A 全网通版 2GB+16GB 香槟金</div>
          <p>
            <span class="floor-product-price">¥2000</span>
            <span class="floor-product-price-old">¥1800</span>
          </p>
        </ion-col>

        <ion-col col-6>
          <img src="assets/img/homeImg/home-slide-09.jpg"/>
          <div class="floor-product-detail">小米 红米5A 全网通版 2GB+16GB 香槟金</div>
          <p>
            <span class="floor-product-price">¥2000</span>
            <span class="floor-product-price-old">¥1800</span>
          </p>
        </ion-col>
      </ion-row>
    </div>
  </div>
</ion-content>
